<template>
    <div id="app">
        <!--        <h2 id="title" ref="title">玫瑰</h2>-->
        <user id="user" ref="user"></user>
        <button @click="getDom">获取 dom 元素</button>
        <student ref="stu" @updateName="updateName" :name=student.name :age=student.age :sex=student.sex :classroom=student.classroom />
    </div>
</template>

<script>
import user from './components/User.vue'
import student from './components/Student.vue'

export default {
    name: 'app',
    data() {
        return {
            student: {name: '迪迦', age: 18, sex: 'man', classroom: 'm78'},
        }
    },
    components: {
        user,
        student
    },
    methods: {
        // 获取元素
        getDom() {
            // console.log(document.getElementById('title'))
            // console.log('------------------------------')
            // console.log(this.$refs.title)
            // console.log('------------------------------')
            // console.log(document.getElementById('user'))
            // console.log('------------------------------')
            // console.log(this.$refs.user.name)
            // console.log(this.$refs.user.getName)
            // console.log(this.$refs.user.getName())
        },
        updateName(name) {
            this.student.name = name
        }
    }
}
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}

nav {
    padding: 30px;
}

nav a {
    font-weight: bold;
    color: #2c3e50;
}

nav a.router-link-exact-active {
    color: #42b983;
}
div{
    background-color: #42b983;
    color: white;
}
</style>
